import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/addon-docs';
import Password from '@shell/components/form/Password';


export const Template = (args, { argTypes }) => ({
  components: { Password },
  props:      Object.keys(argTypes),
  template:   '<Password v-bind="$props" />',
})

<Meta title="Form/Password" />

# Password input field
Input elements with type ‘password’ provide a way for the user to securely enter a password. The text is hidden so that it cannot be read, usually by replacing each character with a symbol such as the asterisk.


### Description

- Always associate a label to every password field for good accessibility. Do not include a colon at the end of the label.
- The password input must have a valid value before the form can be submitted.
- The password input should include a show/hide option to show/hide password.
- The length of the input text provides a hint to users as to how much text to write.
- A password input text only allows for a single line of input.
- It should have a password strength indicator below.
- It should include a text with a hint describing the expected value in the password.

<Canvas>
  <Story
    name="Password"
    args={{
      label: 'Password',
      value: 'password1234',
      required: true,
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Import

<Source
  language='js'
  code={`
     import Password from '@shell/components/form/Password';
  `}
/>

### Props table

<ArgsTable of={Password} />
